<template>
	<div class="rate">
		<uni-rate :allow-half="half" :value="modelValue" :max="max" :readonly="readonly" :disabled="disabled" touchable :size="20" @change="changeRate"></uni-rate>
		<view v-if="showScore" class="rate-text">{{ modelValue }}</view>
		<view v-if="showText" class="rate-text">{{ text }}</view>
	</div>
</template>

<script>
export default {
	name: "vRate",
	model: {
		prop: "value",
		event: "update:value",
	},
	data() {
		return {
			text: "",
		}
	},
	props: {
		value: {
			type: [Number, String],
			default: 0,
		},
		max: {
			type: Number,
			default: 5,
		},
		half: {
			type: Boolean,
			default: false,
		},
		disabled: {
			type: Boolean,
			default: false,
		},
		showText: {
			type: Boolean,
			default: false,
		},
		showScore: {
			type: Boolean,
			default: false,
		},
		readonly: {
			type: Boolean,
			default: false,
		},
	},

	computed: {
		modelValue: {
			get() {
				return this.value
			},
			set(val) {
				this.$emit("update:value", val)
			},
		},
	},

	methods: {
		changeRate(e) {
			this.$emit("update:value", e.value)
			console.log(e.value)
			switch (e.value) {
				case 1:
					this.text = "极差"
					break
				case 1.5:
					this.text = "极差"
					break
				case 2:
					this.text = "差"
					break
				case 2.5:
					this.text = "差"
					break
				case 3:
					this.text = "不错"
					break
				case 3.5:
					this.text = "不错"
					break
				case 4:
					this.text = "好"
					break
				case 4.5:
					this.text = "好"
					break
				case 5:
					this.text = "很好"
					break
			}
		},
	},
}
</script>
<style lang="scss" scoped>
::v-deep .uni-rate {
	flex-wrap: wrap;
}
.rate {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20rpx;
}
</style>
